<template>
	<view>
		<!-- 点菜评价等等  :class="active_top_title: titleNum == 0" -->
		<view class="top-title">
			<view class="title-bottom" :class="{active_top_title:titleNum == 0}" @click="clickTopTitleOrder()">
				<text>全部订单</text>
				<view></view>
			</view>
			<view class="title-bottom" :class="{active_top_title:titleNum == 1}" @click="clickTopTitleEvaluate()">
				<text>待评价</text>
				<view></view>
			</view>
			<view class="title-bottom" :class="{active_top_title:titleNum == 2}" @click="clickTopTitleRefund()">
				<text>退款</text>
				<view></view>
			</view>
		</view>
		
		<!-- <image style="width: 100upx;height: 100upx;" src="http://localhost:8009/images/seller/822df53f-bf7e-4634-820c-9870c54e8098.jpg"></image> -->
		
	
		<block v-for="(orderInfo, index) in pageResult.records" :key="index">
			<view style="padding: 20upx;">
				<uni-card @click="clickRouterTo(orderInfo.sellerId)" is-full="true" style="height: 100upx;" :title="orderInfo.nickname" extra="已完成" :thumbnail="orderInfo.avatar">
					<view>
						<!--  style="display: flex;justify-content: space-between;"-->
						<view style="display: flex;">
							<!-- 使用滚动视图 -->
							<scroll-view scroll-x>
								<block v-for="(orderDetail, index) in orderInfo.orderDetailList" :key="orderDetail.productId">
									<view style="display: inline-block;overflow: hidden;width: 150upx;margin-right: 13upx;">
										<view style="display: flex;flex-direction: column; width: 200upx;align-items: center;">
											<image style="width:120upx;height: 120upx;" :src="orderDetail.productIcon"></image>
											<text style="text-overflow:ellipsis;overflow:hidden;width: 175upx;">{{orderDetail.productName}}</text>
										</view>
									</view>
								</block>
								<!--  background-color: #F0AD4E;-->
								<view style="display: inline-block;width: 50%;height: 100upx;">
									
								</view>
							</scroll-view>
							
							<view class="price-class">
								<view style="width: 100%;height: 100%;display: flex;align-items: center;">
									<text>￥{{orderInfo.orderAmount}}</text>
								</view>
							</view>
						</view>	
					</view>
				
					<view style="display: flex;flex-direction:row-reverse">
						<view style="margin-left: 20upx;">
							<button size="mini">再来一单</button>
						</view>
						<view style="margin-left: 20upx;">
							<button size="mini" @click.stop="gotoComment(orderInfo.orderId)">去评价</button>
						</view>
					</view>
				</uni-card>
			</view>
		</block>
		<view v-if="nodataFlag" style="color: #888888;display: flex;justify-content: center;margin-bottom: 20upx;">
			<text>数据到底了~</text>
		</view>
		<view style="height: 200upx;"></view>
		<view>
			<Promptinfo v-if="pageResult.records.length == 0" :dataInfo="dataInfo"></Promptinfo>
		</view>
		
		
	</view>
</template>

<script>
	
	import {getRequest, getPost} from '../../api/api.js'; // 请求接口
	import {getOrders, getOrderList, checkOrderComment} from '../../api/request.js'; // 请求路径
	import Promptinfo from '../../components/common/promptinfo.vue'; // 提示信息
	
	
	export default {
		components: {
			Promptinfo
		},
		data() {
			return {
				nodataFlag: false, //没有数据了
				dataInfo: '暂无订单，快去点餐吧',
				titleNum: 0,
				// "orderId": "36df553095a4c0e0ec294afbb5fb8b3b",
				 // openId: '1231',
				pageResult: {
					current: 0, 
					total: 0, 
					size: 3,
					records: []
				}
			}
		},
		
		
		onPullDownRefresh: function () {
			console.log("下拉了");
		    console.log('onPullDownRefresh')
		    this.getInitInfo();
		},
		
		mounted() {
			// this.getInitInfo();
		},
		onShow() {
			console.log("我的订单显示了");
			 this.getInitInfo();
		
			

			console.log("显示完成");
		},
		
		/**
		  * 页面上拉触底事件的处理函数
		  */
		 onReachBottom: function () {
		     console.log("拉到底了index");
			 this.getInitInfo();
		 },
		
		methods: {
			// 去评价
			gotoComment(orderId) {
				console.log("去评价：" + orderId);
				
				
				getRequest(checkOrderComment+`?orderId=${orderId}`)
					.then((res)=> {
						console.log("检查订单");
						console.log(res);
						// 去订单页面
						uni.navigateTo({
							url:'/components/ordercomment/ordercomment?orderId='+orderId,
						})
					})
					.catch((err)=> {
						
					})
				
				
				
			},
			
			 getInitInfo() {
				console.log(1)
				// openId=1231&page=1&size=12
				// await getRequest(getOrderList+"page=" +this.pageResult.current + "&size=12")
				 getRequest(getOrders+"page=" +this.pageResult.current + "&size="+this.pageResult.size)
					.then((res)=> {
						console.log(res.data.data.pageResult);
						console.log("==========");
						if(res.data.data.pageResult.records.length == 0) {
							this.nodataFlag = true; // 没有数据啦
						} else {
							this.pageResult.current = res.data.data.pageResult.current; 
							this.pageResult.total = res.data.data.pageResult.total;
							this.pageResult.size = res.data.data.pageResult.size;
							this.pageResult.current++;
							for(let index in res.data.data.pageResult.records) {
								this.pageResult.records.push(res.data.data.pageResult.records[index]);
							}
						}
						console.log("当前的下页面大小:" + this.pageResult.current + " " + this.pageResult.size);
						
					})
			},
			
			/* 点餐标签 */
			clickTopTitleOrder() {
				this.titleNum = 0;
				console.log("点击了点餐");
			},
			
			/* 评价标签 */
			clickTopTitleEvaluate() {
				this.titleNum = 1;
				console.log("点击了评价");
			},
			
			clickTopTitleRefund() {
				this.titleNum = 2;
				console.log("点击了退款");
			},
			
			/* 点击商家头像进行跳转 */
			clickRouterTo(sellerId) {
				// 点击了商家面板,进行跳转到商家信息商品展示
				console.log("点击了商家面板,进行跳转到商家信息商品展示");
				// console.log(sellerInfo.sellerId);
				let id = sellerId;
				uni.navigateTo({
					url:`../../pages/sellershow/sellershow?sellerId=`+sellerId
				})
			},
			
		}
	}
</script>

<style scoped>
	.top-title {
		padding: 15upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.title-bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20upx;
		margin-right: 20upx;
	}
	
	.title-bottom text {
		line-height: 70upx;
		font-weight: bold;
		font-size: 35upx;
	}
	
	.title-bottom view {
		height: 10upx;
		width: 80%;
		margin-left: 10%;
		margin-right: 10%;
		
	}
	
	/* 点餐和评价底部的动态样式 */
	.active_top_title view {
		background-color: #F0AD4E;
		width: 40upx;
	}
	
	
	/* 样式 */
	scroll-view{
		/* width: 100%; */
		/* height: 300rpx; */
		white-space: nowrap;
	}
	
	.price-class {
		background: rgba(0, 0, 0, 0.5);
		z-index: 7000;
		opacity: 0.9;
		position:absolute;
		right: 10upx;
		height: 160upx;
		margin-right: 20upx;
		/* background-color: #F0AD4E; */
		background-color: white;
	}
</style>
